<template>
	<yd-layout id='leaderDetail' class=''>
		<div class="header">
			<!--teacherObj.back_type==1-->
			<img v-if="!leaderObj.title_video" class="header_img" :src="leaderObj.title_img" alt="" />
			<!--controls-->
			<div @click="playVideo"  style="position: relative;z-index: 9;" v-else-if='leaderObj.title_video'>
				<video 
					ref='videoRef'
					id="test_video" 
					width="100%" 
					height="30%" 
					x5-video-orientation="landscape" 
					webkit-playsinline="" 
					playsinline="" 
					x5-playsinline="" 
					x-webkit-airplay="allow" 
					class="header_video header_img" 
					:src="leaderObj.title_video" 
					:poster='leaderObj.title_img'
					:controls='videoControls'
					style="width:100%;"
					@pause="pauseVideo"
					@play='playVideo1'
				>
				</video>
				<div  v-show="isShowContent" class="header_content">
					<div class="c_top">
						<img src="../../assets/videoImg.png" alt="" />
						<div class="c_top_label c_size_34_48 c_text_ellipsis_1"><span>一分钟认识领袖{{leaderObj.nick_name}}</span></div>
					</div> 
				</div>
			</div>
		</div>
		<div class="content">
			<div class="c_top_name">{{leaderObj.nick_name}}</div>
			<div class="teacher_detail_f" ref='textFRef' :style="{maxHeight:moreFlg?'inherit':'2.4rem'}">
				<div ref='textRef' class="teacher_detail" :class="textFlg&&!moreFlg?'text7':''" >
					<div class="c_v_html" v-html="leaderObj.detail"></div>
				</div>
				<!--<div v-show="(!moreFlg)&&textFlg"  class="detail_bk"></div>-->
			</div>
			
			<template v-if='textFlg'>
				<img class="look_img" @click="moreFlg=false" v-if="moreFlg"  src="../../assets/shouqi.png" alt="" />
				<img class="look_img" @click="moreFlg=true" v-else  src="../../assets/lookAll.png" alt="" />
			</template>
			<div v-show='dataList.length>0' class="leader_title">走近领袖</div>
			
			<yd-infinitescroll v-show='dataList.length>0' :callback="getArticles" ref="infinitescrollDemo">
				<ArticleList :articleTime='articleTime' slot="list" :dataList='dataList'></ArticleList> 
				<!-- 数据全部加载完毕显示 -->
		        <span slot="doneTip">没有更多数据了~~</span>
		
		        <!-- 加载中提示，不指定，将显示默认加载中图标 -->
		        <!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
			</yd-infinitescroll>
			<!--<div v-if="dataList.length==0" class="no_list">暂无内容</div>-->
			
		</div>
		<img @click="goLeaderHeart" class="leader_heart_img" src="../../assets/leaderHeart.png" alt="" />
		
		<yd-popup v-model="showPop" class='pop' position="center" width="100%" height='100%'> 
			<div class="pop_img_f">
				<div class="pop_img">
					<img class="pop_heart_img" src="../../assets/leader_heart_msg.png" alt="" />
					<img @click="showPop=false" class="pop_close_img" src="../../assets/close_1.png" alt="" />
				</div>
			</div>
		</yd-popup>
		
		<yd-backtop></yd-backtop>
		<!--<div class="content" v-html="teacherObj.content"></div>-->
		<!--<div class="c_go_home c_size_30_42" @click="$router.push({name:'index'})">去首页</div>-->
	</yd-layout>
	
</template>

<script>
	import ArticleList from '../../components/ArticleList/ArticleList.vue'
	import {Popup} from 'vue-ydui/dist/lib.rem/popup';
	import {InfiniteScroll} from 'vue-ydui/dist/lib.rem/infinitescroll';
	import {BackTop} from 'vue-ydui/dist/lib.rem/backtop';
	export default{
		components:{
			[ArticleList.name]: ArticleList,
			[Popup.name]: Popup,
			[InfiniteScroll.name]: InfiniteScroll,
			[BackTop.name]: BackTop,
		},
		data(){
			return {
				articleTime:false,
				teacherObj:{}, 
				videoControls:false,
				isShowContent:true,
				params:{},
				teacher_id:'',
				textFlg:false,//判断是否有收起和查看全部按钮
				moreFlg:false,
				dataList:[],
				showPop:false,
				leaderObj:{},
				pageNum:1,
				pageCount:10,
				playVideoFlg:false,
			}
		},
		created() {
		},
		watch: {
			
		},
		computed: {
			
		},
		async mounted(){
			if(sessionStorage.getItem('wst_isShare')==1){
				this.showPop=true;
				sessionStorage.setItem('wst_isShare','')
			}
			await this.getArticles()
			this.leaderDetail()
			
		},
		methods:{
			//领袖动态
			getArticles(){
				this.$root.ajax({
					name:'leader/articles',
					type:'get',
					params:{
						page:this.pageNum,
						count:this.pageCount,
						leader_id:this.$route.query.id
					}
				}).then((d)=>{
					for(let a = 0 ; a<d.data.article_list.length;a++){
						d.data.article_list[a].newTime = this.$root.getDate(new Date(d.data.article_list[a].create_time*1000))
					}
					this.dataList = [...this.dataList, ...d.data.article_list];

                    if (this.dataList.length >= d.data.article_total ) {
                        /* 所有数据加载完毕 */
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                        return;
                    }

                    /* 单次请求数据完毕 */
                    this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

                    this.pageNum++;
				})
			},
			//领袖详情
			leaderDetail(){
				this.$root.ajax({
					name:'leader/detail',
					type:'get',
					params:{
						id:this.$route.query.id
					}
				}).then((d)=>{
					document.title=d.data.leader.nick_name
//					d.data.leader.title_video = 'https://www.runoob.com/try/demo_source/movie.mp4'
					this.leaderObj=Object.assign({},this.leaderObj,d.data.leader)
					if(this.dataList.length>0){
						this.$nextTick(()=>{
							if(this.$refs.textRef.offsetHeight>this.$refs.textFRef.offsetHeight){
								this.textFlg=true
							}
						})
					}else{
						this.moreFlg = true 
					}
						
					
					if(this.$root.isWeiXin()){
						//分享
						let query = '';
						if(this.$root.config.channel){
						 	query = `params=channelDY2FGoldUrlStrDY${this.$route.name}FGkeyNumDY1FGparamsKey1DYidFGparamsVal1DY${d.data.leader.id}`
						}else{
						 	query = `params=oldUrlStrDY${this.$route.name}FGkeyNumDY1FGparamsKey1DYidFGparamsVal1DY${d.data.leader.id}`
						}
						this.$root.wxShare({
							d:{title:this.leaderObj.nick_name,title_img:this.leaderObj.avatar},//分享对象，题目等{title:'',title_img:''}
							query: query,//参数
							desc:d.data.leader.title,//分享详情
						})
					}
				})
			},
			//倾诉心声
			goLeaderHeart(){
				this.$router.push({
					name:'leaderHeart',
					query:{
						uid:this.leaderObj.uid,
						id:this.$route.query.id
					}
				})
			},
			//播放视频
			playVideo(){
				var myVideo=this.$refs.videoRef;
				console.log(myVideo)
				myVideo.play();
				this.isShowContent=false;
				this.videoControls=true;
				
				
			},
			playVideo1(){
				this.playVideoFlg = true
				this.$root.id = this.$route.query.id
				this.$root.uuid = (parseInt((parseInt(new Date()-0))/1000))+''+(this.$root.userInfo.me.id||0)
				this.$root.submitEvent({
					kind:0,
					position:this.$refs.videoRef.currentTime,
				})
				
				this.$store.commit({
					type:'setDataEvent',
					data:{
						kind:0,
						oid:this.$route.query.id,
						uuid:this.$root.uuid,
						uid:this.$root.userInfo&&(JSON.stringify(this.$root.userInfo)!='{}')?this.$root.userInfo.me.id:0,
						position:this.$refs.videoRef.currentTime
					}
				})
			},
			//暂停视频
			pauseVideo(){
				this.playVideoFlg = false;
				if(this.$route.name == 'leaderDetail'){
					//因为切换的时候，这个视频会自动暂停，但是不是这个路由页面了，所以做这个判断
					this.$root.id = this.$route.query.id
					this.$root.submitEvent({
						kind:0,
						lastFlg:true,
						position:this.$refs.videoRef?this.$refs.videoRef.currentTime:0
					})
					//这里不要了，吧不然滑动的时候会咸暂停视频，这个就会被触发，就有问题了
					//this.isShowContent=true;
					//this.videoControls=false;
				}
					
			},
			
		},
		beforeDestroy(){
			//播放过后才有这个
			if(this.playVideoFlg){
				//只有播放过后才记录数据
				this.$root.submitEvent({
					kind:1,
					lastFlg:true,
					position:this.$refs.videoRef.currentTime
				})
			}
		},
		
	}
</script>

<style lang="scss">
	@import './leaderDetail.scss';
</style>